<template>
  <div class="route-page box">
    <section class="header">
      <a-page-header title="收据设置">
        <div>
          用于将系统中的账单的关键字如账单金额，收款时间等，以模版的形式记录并生成规范化的收据，并能够直接下载打印收据发给{{
            $L("租客")
          }}。
        </div>
        <template #footer>
          <a-tabs v-model:active-key="activeTab">
            <a-tab-pane
              v-for="tab of TABLIST"
              :key="tab.key"
              :tab="tab.title"
            />
            <template #rightExtra>
              <a-button
                type="primary"
                v-if="activeTab == 'templateList'"
                @click="downLoadClick"
              >
                <template #icon>
                  <DownloadOutlined />
                </template>
                下载样例模板
              </a-button>
            </template>
          </a-tabs>
        </template>
      </a-page-header>
    </section>
    <section class="content">
      <RuleList v-show="activeTab == 'ruleList'" />
      <SellerList v-show="activeTab == 'sellerList'" />
      <TemplateList v-show="activeTab == 'templateList'" />
    </section>
  </div>
</template>

<script>
import { computed, defineComponent, ref, watch } from "vue";
import RuleList from "./modules/ruleList.vue";
import SellerList from "./modules/sellerList.vue";
import TemplateList from "./modules/templateList.vue";
import { DownloadOutlined } from "@ant-design/icons-vue";
import defaultSetting from "../../../common/utils/defaultSetting";
import { useRoute } from "vue-router";
export default defineComponent({
  name: "receiptSetting",
  components: { RuleList, SellerList, TemplateList, DownloadOutlined },
  setup() {
    const $route = useRoute();
    const TABLIST = [
      { title: "收据编号", key: "ruleList" },
      { title: "收款方信息", key: "sellerList" },
      { title: "收据模板", key: "templateList" },
    ];
    const activeTab = ref("");

    // 下载模板
    const iframe = document.createElement("iframe");
    const downLoadClick = () => {
      iframe.src = `${
        defaultSetting.requestDomain
          ? defaultSetting.requestDomain
          : "http://127.0.0.1"
      }/public_web/static/file/org/receipt_example.docx`;
      // "http://127.0.0.1/apps/public_web/static/file/org/receipt_example.docx";
      iframe.style.display = "none";
      document.body.appendChild(iframe);
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 1000);
    };

    const init = () => {
      activeTab.value = $route.query.type || TABLIST[0].key;
    };

    init();

    return { activeTab, TABLIST, downLoadClick };
  },
});
</script>

<style lang="less" scoped>
.title-class {
  display: flex;
  .title {
    font-weight: 700;
    font-size: 20px;
  }
  .title-explain {
    font-size: 14px;
    padding: 10px 0;
    width: 765px;
  }
}
.header {
  background: #fff;
  margin-left: 1px;
  &:deep(.ant-tabs-bar) {
    margin: 0;
  }
}
.content {
  flex: 1;
  padding: 10px;
  overflow: hidden auto;
  height: 800px;
}
:deep(.ant-card-head) {
  border-bottom: none;
}
</style>
